<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<!-- <image src="../../static/left.png" style="position: fixed;top: 80upx;left: 20upx;width: 50upx;" mode="widthFix" @click="navBack"></image> -->
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">易采集品</view>
			<view class="welcome">
				欢迎回来！
			</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input 
						type="number" 
						:value="mobile" 
						placeholder="请输入手机号码"
						maxlength="11"
						data-key="mobile"
						@input="mobileInput"
					/>
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input 
						type="mobile" 
						value="" 
						placeholder="8-18位不含特殊字符的数字、字母组合"
						placeholder-class="input-empty"
						maxlength="20"
						password 
						data-key="pwd"
						@input="pwdInput"
						@confirm="login"
					/>
				</view>
			</view>
			<button class="confirm-btn" style="background-color: #05052B;" @click="login" :disabled="loading">登录</button>
			<view class="forget-section" @click="jump" data-src='./register/register'>
				注册账号
			</view>
		</view>
		<!-- <view class="register-section">
			还没有账号?
			<text @click="toRegist">马上注册</text>
		</view> -->
		<!-- <view class="action-row">
			<navigator url="../reg/reg">注册账号</navigator>
			<text>|</text>
			<navigator url="../pwd/pwd">忘记密码</navigator>
		</view> -->
	</view>
	<!-- <view>
		<image src="../../static/66.png" mode="scaleToFill"  style="position: fixed;top:0upx;left: 0;height: 100%;width: 100%;background-color: #05052B;padding-top: 35upx;"></image>
		<view style="position: fixed;top:155upx;left: 0%;width: 100%;text-align: center;">
			<view style="border-radius: 15upx;overflow: hidden;width: 150upx;height: 150upx;display: inline-block;">
				<image src="../../static/33.jpg" style="width: 150upx;height: 150upx;" mode=""></image>
			</view>
			<view style="color: #fff;width: 100%;text-align: center;font-size: 30upx;margin-top: 30upx;">
				易采集品
			</view>
		</view>
		<view class="cont">
			<view style="margin-top: 420upx;">
				<input class="uni-input" @input="mobileInput" type="number" placeholder="请输入您的手机号" placeholder-style="color:#bbb" style="background: transparent;"/>
				<input class="uni-input" @input="pwdInput" password type="text" placeholder="请输入您的密码" placeholder-style="color:#bbb" style="background: transparent;"/>
			</view>
			<button type="default"  class="login-btn" @click="login" :loading="loading" style="color: #fff;background: transparent;">立即登录</button>
			<view class="btn-group webkit">
				<button type="primary" data-src="forget/forget" @click="weixin_load">密码找回</button>
				<view class="flex"></view>
				<button type="primary" data-src="register/register" @click="jump">立即注册</button>
			</view>
		</view>
	</view> -->
</template>

<script>
	export default {
		data() {
			return {
				width:0,
				height:0,
				mobile:'',
				pwd:'',
				systemInfo:{},
				loading:false,
				cid:'', // 消息推送模块参数
			};
		},
		onLoad:function(){
			var o = this
			uni.hideLoading();
			uni.getSystemInfo({
				success: (res) => {
					this.systemInfo = res
					this.width = res.windowWidth
					this.height = res.windowHeight
				}
			})
			// #ifdef APP-PLUS
			this.cid = plus.push.getClientInfo().clientid
			var getcid = setInterval(function() {  
				o.cid = plus.push.getClientInfo().clientid
				if(o.cid != "" && o.cid != null && o.cid != "null" && o.cid != undefined) { 
						clearInterval(getcid);
				}
			}, 20);
			// #endif  
		},
		onBackPress(options) {
			this.back();  
			return true;  
		},  
		methods: {
			mobileInput(e){
				this.mobile = e.target.value
			},
			pwdInput(e){
				this.pwd = e.target.value
			},
			back(){
				uni.reLaunch({
					url: '../home/home'
				});
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			weixin_load() {
				uni.showToast({
					title: '即将开放',
					icon:"none"
				});
	// 			var _self;
	// 			// #ifdef APP-PLUS
	// 				uni.login({
	// 					success: (res) => {
							
	// 						 uni.getUserInfo({
	// 							success: (info) => {
	// 								// 与服务器交互将数据提交到服务端数据库
	// 								uni.request({
	// 									url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.applogin&app=1',
	// 									method: 'POST',
	// 									header: {'content-type' : "application/x-www-form-urlencoded"},
	// 									data: {
	// 										 openid: info.userInfo.openId,
	// 										 nickname: info.userInfo.nickName,
	// 										 avatar: info.userInfo.avatarUrl,
	// 										 province: info.userInfo.province,
	// 										 city: info.userInfo.city,
	// 									},
	// 									success: res => {
	// 										console.log(res)
	// 										if(res.statusCode == 200){
												
	// 											uni.setStorage({
	// 												key: 'openid',
	// 												data: res.data.openid,
	// 												success: (res) => {},
	// 												fail: () => {}
	// 											})
	// 											uni.setStorage({
	// 												key: 'mid',
	// 												data: res.data.mid,
	// 												success: (res) => {},
	// 												fail: () => {}
	// 											})
	// 											setTimeout(()=>{
	// 												this.loading = false
	// 												uni.reLaunch({
	// 													url: '../member/member'
	// 												});
	// 											},500)
	// 											uni.showToast({
	// 												title: '登陆成功',
	// 												mask: false,
	// 												duration: 1500
	// 											});
	// 										}else{
	// 											uni.showToast({title:'微信登陆失败'});
	// 										}
	// 									},
	// 									fail: () => {
	// 										console.log('登陆失败')
	// 									},
	// 									complete: () => {}
	// 								});
	
	// 							},
	// 							fail: () => {
	// 								uni.showToast({title:"微信登录授权失败"});
	// 							}
	// 						})
	// 					},
	// 					fail: () => {
	// 						uni.showToast({title:"微信登录授权失败"});
	// 					}
	// 				})
	// 			// #endif
			},
			login(){
				this.loading = true
				if(this.mobile == ""){
					this.loading=false
					uni.showToast({
						title: '请输入手机号',
						icon:"none"
					});
				}else if(this.pwd == ""){
					this.loading = false
					uni.showToast({
						title: '请输入密码',
						icon:"none"
					});
				}else{
					console.log(this.cid)
					var data = {
							'mobile': this.mobile,
							'pwd': this.pwd,
							'cid': this.cid,
						}
						console.log(JSON.stringify(data))
					uni.request({
						url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.login&app=1',
						method: 'POST',
						data: data,
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							// console.log(JSON.stringify(res));return false;
							if(res.data.status == 0){
								uni.showToast({
									title: res.data.result.message,
									icon:"none"
								});
								this.loading = false
							}else{
								uni.setStorage({
									key: 'openid',
									data: res.data.result.openid,
									success: (res) => {},
									fail: () => {}
								})
								uni.setStorage({
									key: 'mid',
									data: res.data.result.mid,
									success: (res) => {},
									fail: () => {}
								})
								setTimeout(()=>{
									this.loading = false
									uni.reLaunch({
										url: '../member/member'
									});
								},500)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	  color: $uni-color-error;
		font-size: 26upx;
	}
	
	.action-row navigator {
	  color: $uni-color-error;
		padding: 0 10px;
	}
	.container{
		padding-top: 115px;
		position:relative;
		width: 100vw;
		height: 88vh;
		overflow: hidden;
		background: #fff;
	}
	.wrapper{
		position:relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}
	.back-btn{
		position:absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		/* color: $font-color-dark; */
	}
	.left-top-sign{
		font-size: 120upx;
		color: #05052B;
		position:relative;
		left: 50upx;
		top: -100upx;
	}
	.right-top-sign{
		position:absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;
		&:before, &:after{
			display:block;
			content:"";
			width: 400upx;
			height: 80upx;
			background: url(../../static/126.jpg) no-repeat center;
		}
		&:before{
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}
		&:after{
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}
	.left-bottom-sign{
		position:absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #ECD39A;
		border-radius: 50%;
		padding: 180upx;
	}
	.welcome{
		position:relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0,0,0,.3);
	}
	.input-content{
		padding: 0 60upx;
	}
	.input-item{
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30upx;
		background:#f8f6fc;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height: 50upx;
			line-height: 56upx;
			font-size: 26upx;
			color: #606266;
		}
		input{
			height: 60upx;
			font-size: 30upx;
			color: #303133;
			width: 100%;
		}	
	}

	.confirm-btn{
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-error;
		color: #fff;
		font-size: 32upx;
		&:after{
			border-radius: 100px;
		}
	}
	.forget-section{
		font-size: 26upx;
		color: #4399fc;
		text-align: center;
		margin-top: 40upx;
	}
	.register-section{
		position:absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: 26upx;
		color: #606266;
		text-align: center;
		text{
			color: #4399fc;
			margin-left: 10upx;
		}
	}
</style>